<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "column",
		        Style : {
		            FontSize : "20px"
		        }		
		    },
		    title: {
	            text: 'Data extracted from a HTML table in the page'
	        },
			Credits : {
				Enabled:false
			},
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
		    Legend : {
				Enabled:false
		    },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Units'
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.point.y +' '+ this.point.name.toLowerCase();
                }
            }
		}
		
		myChart.SetOptions(cfg);
		
		myChart.SetOptions({
			data: {
				table: document.getElementById('datatable')
	        }
		});
		
		myChart.Draw();
	});
	
	function runCmd() {
		var cmd = $('#cmdDown').val();
		eval(cmd);
		
		myChart.Draw();
	}
	
</script>
<title>HTML Table 데이터를 차트에 표현하는 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">HTML Table 데이터를 차트에 표현하는 예제</div>
	<div id="desc">
		http://www.highcharts.com/demo/column-parsed<br>
		현재 테스트 결과 : Uncaught RangeError: Maximum call stack size exceeded 에러
	</div>

	<div id="functionArea">
		<table id="datatable">
			<thead>
				<tr>
					<th></th>
					<th>Jane</th>
					<th>John</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Apples</th>
					<td>3</td>
					<td>4</td>
				</tr>
				<tr>
					<th>Pears</th>
					<td>2</td>
					<td>0</td>
				</tr>
				<tr>
					<th>Plums</th>
					<td>5</td>
					<td>11</td>
				</tr>
				<tr>
					<th>Bananas</th>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<th>Oranges</th>
					<td>2</td>
					<td>4</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "1000px", "300px");
		</script>
	</div>
</div>
</body>
</html>